<!DOCTYPE html >
<html>
<head>
<meta name="Generator" content="TPshop v1.1" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>我的名片</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<!-- <link rel="stylesheet" href="__ROOT__ /AI_radar/css/footer.css"> -->
<!-- <link rel="stylesheet" href="__ROOT__ /AI_radar/css/font_my/iconfont.css"> -->
<link rel="stylesheet" href="__ROOT__ /AI_radar/css/font_crm_my/iconfont.css">

<script type="text/javascript" src="__ROOT__ /AI_radar/js/token.js"></script>
<style type="text/css">
	body,html{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		color:#555555;
		background: #eee;
	}
	p{
		margin: 0;
	}
	.card{
		width: calc(100% - 20px);
		height: 100%;
		padding: 0 10px;
		background: #eee;
		display: flex;
		vertical-align: middle;
	}
	.cardZ{
		width: 100%;
		height: 100%;
		background: #fff;
	}
	.cardTop{
		width: calc(100% - 20px);
		padding: 15px 10px;
		border-bottom: 1px solid #eaeaea;
	}
	.cardTops{
		display: flex;
	}
	.cardTopL{
		width: calc(100% - 70px);
	}
	.cardTopP1{
		font-weight: bold;
	}
	/*.cardTopM{
		margin-top: 10px;
		display: inline-block;
	}*/
	.cardTopMar{
		margin-top: 30px;
	}
	.cardTopR{
		width: 60px;
	}
	.cardTopR img{
		width: 60px;
		margin-top: 20px;
		/*height: 30px;*/
	}
	.cardBot{
		width: calc(100% - 20px);
		padding: 20px 10px;
	}
	.cardBotImg{
		width: 60%;
		margin: auto;
	}
	.cardBotImg img{
		width: 100%;
	}
	.cardBotP{
		text-align: center;
		line-height: 30px;
	}
	.cardS{
		width: 90%;
		/*height: 15rem;*/
		background: #fff;
		/*margin: 0 5%;*/
		margin: auto;
		color: #fff;
		position: relative;
	}
	.cardSZ,.cardDom{
		width: 100%;
		height: 100%;
		background: #fff;
	}
	.cardST{
		width: calc(100% - 2rem);
		height: calc(48% - 1rem);
		border-radius: 0.4rem;
		background: url("__ROOT__ /AI_radar/image/my/cards.png");
		background-size: 100% 100%;
		margin: 0.5rem;
		padding: 0.5rem;
		display: inline-block;
	}
	.cardSTT{
		width: 100%;
		height: 50%;
		display: flex;
	}
	.cardSTTL{
		width: 70%;
		height: 100%;
		/*background: red;*/
	}
	.cardSTTR{
		width: 30%;
	}
	.cardHeadImg{
		width: 80%;
		margin: 10%;
		border-radius: 50%;
	}
	.cardSTTLT{
		height: 35%;
		width: 95%;
		overflow: hidden;
		font-size: 11px;
		margin-top: 5%;
		/*text-indent: 0.5rem;*/
		display: flex;

	}
	.cardName{
		height: 30%;
		width: 95%;
		overflow: hidden;
		font-size: 14px;
		font-weight: bold;
		text-indent: 0.5rem;
	}
	.cardX{
		height: 25%;
		width: 95%;
		overflow: hidden;
		font-size: 11px;
		text-indent: 0.5rem;
	}
	.cardSTB{
		padding-top: 6%;
		width: 100%;
		height: 46%;
	}
	.cardSTBFont{
		width: 100%;
		height: 28%;
		font-size: 11px;
		display: flex;
		text-indent: 0.5rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.cardSB{
		width: 100%;
		height: 51%;
		padding-top: 1%;
	}
	.cardSBImg{
		height: 70%;
		/*background: red;*/
		margin: auto;
	}
	.cardBotImgs{
		width: 100%;
		height: 100%;
	}
	.cardSBFont{
		width: 100%;
		height: 28%;
		margin-top: 2%;
		text-align: center;
		font-size: 11px;
		color: #333333;
	}
	.loading{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.load{
		width: 100%;
		height: 100%;
		/*position: absolute;
		top: 0;
		left: 0;*/
		background: #fff;
		display: flex;
		vertical-align: middle;
	}
	.load img{
		width: 4rem;
		height: 4rem;
		margin: auto;
	}
	.cardSTTLTL{
		width: 15px;
		height: 15px;
		background: #fff;
		margin-left: 0.5rem;
	}
	.logo{
		width: 100%;
		height: 100%;
	}
	.cardSTTLTR{
		width: calc(100% - 20px);
		margin-left: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

/*http://resource.17jxyx.com/goods/15537572830000.gif*/

</style>

</head>
<body>
	{include file="public/wx_share" /}
	<div class="card">
		<div class="cardS">
			<div class="cardSZ">
				<div class="cardDom">
					<div class="cardST">
					<div class="cardSTT">
						<div class="cardSTTL">
							<div class="cardSTTLT">
								<div class="cardSTTLTL"><img src="" class="logo"></div>
								<div class="cardSTTLTR"></div>

							</div>
							<div class="cardSTTLC cardName"></div>
							<div class="cardSTTLB cardX"></div>
						</div>
						<div class="cardSTTR">
							<img src="__ROOT__ /AI_radar/image/my/styleMy.jpg" alt="" class="cardHeadImg">
						</div>
					</div>
					<div class="cardSTB">
						<div class="cardSTBFont cardPhoneS"><i class='iconfont icon-weibiaoti'></i> <span class="cardPhone"></span></div>
						<div class="cardSTBFont cardEamilS"><i class='iconfont icon-icon'></i> <span class="cardEamil"></span></div>
						<div class="cardSTBFont cardAddressS"><i class='iconfont icon-dizhi'></i> <span class="cardAddress"></span></div>
					</div>
				</div>
				<div class="cardSB">
					<div class="cardSBImg"><img src="" class="cardBotImgs" alt=""></div>
					<div class="cardSBFont">长按识别小程序码 收下名片</div>
				</div>
				</div>
				
			</div>
			<div class="loading"><div class="load"><img src="http://resource.17jxyx.com/goods/15537572830000.gif"></div></div>
		</div>
		<!-- <div class="cardZ" style="display:none">
			<div class="cardTop">
				<div class="cardTops">
					<div class="cardTopL">
						<p class="cardTopP1 cardTopM cardGj">新华杨科技</p>
						<p class="cardTopP2 cardGq">四川新华杨科技有限公司</p>
						<p class="cardTopP1 cardTopMar cardName"></p>
						<p class="cardTopP2 cardX"></p>
					</div>
					<div class="cardTopR"><img src="__ROOT__ /AI_radar/image/my/styleMy.jpg" alt="" class="cardHeadImg"></div>
				</div>
				<div class="cardBottom">
					<p class="cardTopP2 cardTopMar">电话：<span class="cardPhone"></span></p>
					<p class="cardTopP2">班型：<span class="cardEamil"></span></p>
				</div>
			</div>
			<div class="cardBot">
				<div class="cardBotImg">
					<img src="" class="cardBotImgs" alt="">
				</div>
				<p class="cardBotP">长按查看小程序名片</p>
			</div>
		</div>
 -->
	</div>
	<canvas class="canvas" style="display:none;"></canvas>
<script src='__ROOT__ /AI_radar/js/jquery.js'></script>
<script src="__ROOT__ /AI_radar/js/my/html2canvas.js"></script>
<script type="text/javascript">
	// console.log(window.urls.url)
	// console.log($(".cardS").width())
	$(".cardS").css("height",$(".cardS").width()*1.2+'px')
	$(".cardHeadImg").css("height",$(".cardHeadImg").width() + 'px')
	$(".cardSBImg").css("width",$(".cardSBImg").height()+'px')
	//传入图片路径，返回base64
    function getBase64(img){
        function getBase64Image(img,width,height) { 
        //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
          var canvas = document.querySelector(".canvas");
          canvas.width = width ? width : img.width;
          canvas.height = height ? height : img.height;
 

          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          var dataURL = canvas.toDataURL();
          return dataURL;
        }
        var image = new Image();
        image.crossOrigin = '';
        image.src = img;
        var deferred=$.Deferred();
        if(img){
          image.onload =function (){
            deferred.resolve(getBase64Image(image));//将base64传给done上传处理
          }
          return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
        }
      }
	$.ajax({
	      url:window.urls.url + "/my/oneself/info",
	      type:"POST",
	      contentType: "application/json",
	      dataType:"json",
	      data:JSON.stringify({
	        token:window.tokens.token_boss,
	      }),
	      success:function(res){
	        // console.log(res)
	        		// alert(res.data)
	        		// alert(res.data.userimg)


	        // console.log(res.data)
	        // alert(res.data.position)
	        // alert(res.data.card.phone)
	        // alert(res.data.card.address)
	        // alert(res.data.card.email)



	        if(res.data){
	        	if(res.data.userimg){
	        		// alert(res.data.userimg.url)
	        		// document.querySelector(".cardHeadImg").src = res.data.userimg.url
	        		if(localStorage.getItem("headImg")){
						document.querySelector(".cardHeadImg").src = JSON.parse(localStorage.getItem("headImg")).url
	        		}else{
	        			// console.log("下载")
	        			getBase64(res.data.userimg.url)
			            .then(function(base64){
			            	var obj = {
			            		id:res.data.thirdapp.img.id,
			            		url:base64
			            	}
			            	localStorage.setItem("headImg",JSON.stringify(obj))
			            	document.querySelector(".cardHeadImg").src = base64
			                // console.log(base64);//处理成功打印在控制台
			            },function(err){
			                console.log(err);//打印异常信息
			            }); 
	        		}
	        		
	        	}
	        	if(res.data.thirdapp){
	        		if(res.data.thirdapp.img){
			            // document.querySelector(".logo").src = res.data.thirdapp.img.url
			            // console.log(res.data.thirdapp.img.url)
						if(localStorage.getItem("logoImg")){
							// document.querySelector(".logo").src = JSON.parse(localStorage.getItem("logoImg")).url
							document.querySelector(".logo").src = localStorage.getItem("logoImg")
		        		}else{
		        			getBase64(res.data.thirdapp.img.url)
				            .then(function(base64){
				            
				            	localStorage.setItem("logoImg",base64)
				            	document.querySelector(".logo").src = base64
				                // console.log(base64);//处理成功打印在控制台
				            },function(err){
				                console.log(err);//打印异常信息
				            }); 
				        }
	        		}
	        		$(".cardSTTLTR").html(res.data.thirdapp.sub_name)
	        	}
	        	if(res.data.name){
	        		$(".cardName").html(res.data.name)
	        	}
	        	if(res.data.position){
	        		$(".cardX").html(res.data.position)
	        	}
	        	if(res.data.card){
	        		if(res.data.card.phone){
	        			$(".cardPhone").html(res.data.card.phone);
	        		}
	        		if(res.data.card.email){
	        			$(".cardEamil").html(res.data.card.email);
	        		}else{
	        			$(".cardEamilS").css("display","none")
	        		}
	        		if(res.data.card.company){
	        			$(".cardGq").html(res.data.card.company);
	        		}
	        		if(res.data.card.address){
	        			$(".cardAddress").html(res.data.card.address);
	        		}else{
	        			$(".cardAddressS").css("display","none")
	        		}
	        	}

	        }
	        jQuery(document).ready(function(){

		    	var dom=$(".cardSZ"); //你要转变的dom
			    var width = dom.width();
			    var height = dom.height();
			    var type = "png";
			    var scaleBy = 3;  //缩放比例
			    var canvas = document.createElement('canvas');
			    var rect = dom.get(0).getBoundingClientRect(); 
			    canvas.width = width * scaleBy;
			    canvas.height = height * scaleBy;  //35是我处理完后发现短了一点，具体为什么不清楚,如果你也少的话，根据自己的项目调吧
			    canvas.style.width = width * scaleBy + 'px';
			    canvas.style.height = height * scaleBy + 'px';
			    var context = canvas.getContext('2d');
			    context.scale(scaleBy, scaleBy);
			    context.translate(-rect.left,-rect.top);
			    // 【重要】关闭抗锯齿
		        context.mozImageSmoothingEnabled = false;
		        context.webkitImageSmoothingEnabled = false;
		        context.msImageSmoothingEnabled = false;
		        context.imageSmoothingEnabled = false;

		        var img = new Image();
		        // console.log(img)
		        //此处图像默认放置占位，必须真实有效存在
		        setTimeout(function(){
			        img.src='https://business.17jxyx.com/AI_radar/image/my/images.jpg';
			        img.onload = function(){
			            var elem = jQuery('.cardSZ');
			            html2canvas([elem.get(0)], {
			            	canvas:canvas,
			                onrendered: function (canvas) {
			                    var image = canvas.toDataURL("image/jpg");
			                    var pHtml = "<img src='"+image+"' style='width:100%;height:100%'>";
			                	$(".cardDom").css("display",'none')
			                    $('.cardSZ').html("");
			                    jQuery(".cardSZ").html(pHtml);
			                    $(".loading").css("display","none")
			                    // jQuery("#content").attr("style","padding-top:40px");
			                    // $("#content").append(Canvas2Image.convertToImage(canvas,width* scaleBy,height* scaleBy,type));//这是放大了很3倍的图片
			        			// $("#content img").css("width",width+"px").css("height",height+"px");//
			                }
			            });
			        }
		        },1000)
			});
	      },
	      error:function(res){
	        console.log(res)
	        // alert("错误")
	      }
  	})
	if(localStorage.getItem("qrcodeImg")){
		document.querySelector(".cardBotImgs").src = localStorage.getItem("qrcodeImg")
	}else{
	  	$.ajax({
		      url: window.urls.url + "/my/qrcode",
		      type:"POST",
		      contentType: "application/json",
		      dataType:"json",
		      data:JSON.stringify({
		        token:window.tokens.token_boss,
		      }),
		      success:function(res){
		        // console.log(res)
		        // console.log(res.data)
		        if(res.data){
		        	
		        		getBase64(res.data.url)
			            .then(function(base64){
			            	localStorage.setItem("qrcodeImg",base64)
			            	document.querySelector(".cardBotImgs").src = base64
			                // console.log(base64);//处理成功打印在控制台
			            },function(err){
			                console.log(err);//打印异常信息
			            }); 
			        }
		        	// document.querySelector(".cardBotImgs").src = res.data.url
		      },
		      error:function(res){
		        console.log(res)
		      }
	  	})
	}

	// console.log($)

</script>
</body>
</html>